{% extends 'common/panel.html' %}
{% block title %}{{protocol.name}} Species List{% endblock title %}
{% block panel %}
    <style type="text/css" media="screen">
    
      ul.splist {
        font-size:12px;
        margin:0;
        padding:0;
      }
      
      ul.splist li {
        text-indent:none;
        width:95%;
        position:relative;
        padding:5px 5px;
        border-bottom:solid 1px #D9D9D9;
      }
      
      ul.splist div.mark {
        background: #9EBFDD url({{MEDIA_URL}}images/data-background.png) repeat;
        position:absolute;
        border-bottom:solid 1px #5F88C7;
        border-right:solid 1px #7FACDD;
        top:0px;
        left:0px;
        height:100%;
/*        z-index:-1;*/
      }
      
      ul.results li:hover div.mark {
        background-color:#A8CFF2;
        border-right:2px solid #FFBD00;
      }
        
      ul.scale li {
        height:15px;
        border:none;
      }
      
      ul.scale li.ticks {
        height:8px;
        border-bottom:solid 1px #A5A8AE;
        border-right:solid 1px #BABDC4;
        margin-bottom:5px;
      }
            
      ul.scale li span {
        position:absolute;
        border-right:1px solid #A5A8AE;
        width:40px;
        margin-left:-45px;
        height:18px;
        bottom:0px;
        padding-right:5px;
        text-align:right;
      }
      
      ul.scale li.unit {
        font-size:14px;
        margin-bottom:10px;
      }
      
      ul.scale li span:first-child {
        border-right:none;
        border-left:1px solid #A5A8AE;
        margin-left:0px;
        padding-left:5px;
        padding-right:0px;
        text-align:left;
      }
      
      ul.splist li span.mean {
        display:none;
        position:absolute;
        right: 10px;
        top:4px;
      }
      
      ul.splist li:hover span.mean {
        display:block;
      }
      
      ul.results li:hover {
        background-color:#D1E7F9;
      }
      
      div.name {
        z-index:2;
        position:relative;
      }
      
      select.year_selector {
        position:absolute;
        right:0px;
      }
    </style>
    <script type="text/javascript" charset="utf-8">
        lingcod.onShow((function(){
          return function(){
            var data = {{means|safe}};
            var keys = [];
            window.keys = keys;
            for(var key in data){
              keys.unshift(key);
            }
            var keys = keys.sort().reverse();
            
            var nTics = 4;

            var legend = d3.select('#spscale_{{protocol.pk}}');

            legend.append('li')
              .attr('class', 'unit')
              .text('{{protocol.unit}}')
              .append('select')
                .attr('class', 'year_selector')
                .attr('id', 'year_selector_{{protocol.pk}}')
                  .selectAll('option')
                      .data(keys).enter()
                    .append('option')
                      .text(function(d){return d;})

            var year_selector = $('#year_selector_{{protocol.pk}}');
            year_selector.change(function(){
              redraw(year_selector.find('option:selected').text());
            });
            

            var ticks = legend.append('li')
              .attr('class', 'ticks')

            var chart = d3.select('#splist_{{protocol.pk}}');

            var min = 0;
            var all_rows = [];
            for(var key in data){
              all_rows = all_rows.concat(data[key]);
            }
            var max = d3.max(all_rows, function(d){return d.mean;});
            var x = d3.scale.linear()
              .domain([min, max])
              .range(["0px", "100%"]);

            var t = x.ticks(nTics);
            var dx = t[1] - t[0] // difference between the ticks. 
            var x1 = dx * ticks.length; // extend one extra tick value. 
            x.domain([0, dx * t.length]) // widen the domain 
            var xticks = x.ticks(t.length) // request one extra tick than
            
            function redraw(key){
              // var xticks = x.ticks(nTics);
              // xticks.push(max);
              ticks.selectAll('span')
                  .data(xticks)
                .enter().append('span')
                  .text(function(d){return Math.round(d * 100) / 100;})
                  .style('left', x)
              ticks.append('br')
                .style('clear', 'both')
                
              function dkey(d){
                var dk = (d.year || 'All years').toString() + pickName(d);
                return dk;
              }

              var rows = data[key].sort(function(a, b){
                return b.mean - a.mean;
              });
              
              var d = chart.selectAll("li")
                  .data(rows, dkey)
              
                  
              d.exit()
                  .remove()

              var lis = d.enter()
                .append('li')
                
              
              lis
                .append('div')
                  .attr('class', 'mark')
                  .style('width', function(d){return x(d.mean);})
                  .text('');
              

              lis.append('span')
                .attr('class', 'mean')
                .text(function(d){return Math.round(d.mean * 100) / 100;})

              
              lis
                .append('div')
                  .text(pickName)
                  .attr('class', 'name');

              
            }
            
            function pickName(d){
              var name = d.common_name;
              if(!name || name === ''){
                name = d.scientific_name;
              }
              return name;
            }

            year_selector.trigger('change');

          }    
        })());
    </script>
    {% if not is_ajax and not request.is_ajax %}
    <h1>{{protocol.name}} Species List</h1>
    {% endif %}
    <div>
      
    </div>
    <ul id="spscale_{{protocol.pk}}" class="splist scale">
    </ul>
    <ul id="splist_{{protocol.pk}}" class="splist results">
    </ul>
{% endblock panel %}